<template>
  <div class="account">
    <NavBar></NavBar>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <div class="card-content">
          <van-field
            v-model="title"
            name="picker"
            placeholder="Address Title"
            @click="picker('title')"
          >
          </van-field>
        </div>
        <div class="card-content">
          <van-field v-model="name" name="name" placeholder="Name Surname" />
        </div>
        <div class="card-content">
          <van-field v-model="city" name="picker" placeholder="City" @click="picker('city')">
          </van-field>
        </div>
        <div class="card-content">
          <van-field
            v-model="address"
            name="address"
            placeholder="Address"
            :rules="[{ required: true, message: '请输入账号' }]"
          >
          </van-field>
        </div>
      </van-cell-group>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
      <bottom-btn firstFont="Add Card"></bottom-btn>
    </van-form>


    <TabBar></TabBar>
  </div>
</template>

<script setup lang="ts">
import { NavBar, TabBar } from "../../../components";
const list :any = [
  {
    type: "Home",
    icon: "../../src/assets/img/icon-address-home.png",
    detail: "Lungangen6 1234567",
  },
  {
    type: "Office",
    icon: "../../src/assets/img/icon-address-office.png",
    detail: "Lungangen6 1234567",
  },
]
</script>
<style scoped lang="less">
.addressItem {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
  display: flex;
  align-items: center;
}
.addressType,.addressLabel{
  padding-left: 10px;
  font-size: 14px;
  color:#6d3805;
}
.addressType {
  font-weight: bold;
  font-size: 18px;
}
</style>
